<!--
 * @FilePath     : /vision/src/components/Trend.vue
 * @Author       : 哒哒哒
 * @Date         : 2024-05-24 16:25:19
 * @Description  :  销量趋势图表（折线图）- 路由
 * Copyright    : G AUTOMOBILE RESEARCH INSTITUTE CO.,LTD Copyright (c) 2024.
-->

<template>
    <div class="com-page" :class="{ 'fullscreen': isFullScreen }">
        <div class="com-container trend">
            <!-- 自制下拉框 -->
            <div class="select-box" :style="comStyle">
                <div class="selected">
                    {{ '▎ ' + select.text }}
                    <span class="iconfont title-icon" :class="{ fold: !showChoice }" :style="comStyle"
                        @click="showChoice = !showChoice">&#xe6eb;</span>
                </div>
                <div class="select-options" :class="{ fold: !showChoice }">
                    <div class="option" v-for="item in unSelectOptions" :key="item.key" @click="changeSelect(item)">{{
                        item.text }}</div>
                </div>
            </div>
            <!-- echarts图标 -->
            <div class="com-chart" ref="trend_ref"></div>
            <!-- 右上角方法按钮   -->
            <FullSCreenIcon :isFullScreen="isFullScreen" @toggleFullScreen="changeFullScreen"></FullSCreenIcon>
        </div>
    </div>
</template>

<script>
import { throttle } from '@/utils';
import FullSCreenIcon from './FullScreenIcon/index.vue'
import FullscreenMixin from './mixins/FullscreenMixin'
import ThemeMixins from '@/mixins/ThemeMixins';
import { getThemeValue } from '@/utils/theme_utils';
export default {
    /* eslint-disable */
    name: 'Trend',
    mixins: [FullscreenMixin, ThemeMixins],
    components: {
        FullSCreenIcon
    },
    data() {
        return {
            // 图标实例
            chartInstance: null,
            // 服务器返回的所有数据
            allData: null,
            // 当前显示的页数
            currentPage: 1,
            // 定时器标识
            timerId: null,
            // 记录监听事件，用于取消事件
            throttledAdaptScreen: null,
            // 字体，根据屏幕大小改变
            fontsize: 66,
            // 下拉框的可选项
            selectOptions: [],
            // 下拉框当前的选项
            select: {},
            // 是否展示下拉框
            showChoice: false
        }
    },
    computed: {
        unSelectOptions() {
            if (!this.allData) return [];
            return this.selectOptions.filter(item => item.key != this.select.key)
        },
        comStyle() {
            return {
                color: getThemeValue(this.theme).titleColor,
                fontSize: this.fontsize + 'px'
            }
        }
    },
    created() {
        this.$socket.registerCallback('trendData', this.getData)
    },
    async mounted() {
        this.initChart();

        this.$socket.send({
            action: 'getData',
            socketType: 'trendData',
            chartName: 'trend',
            value: ''
        })
        this.adaptScreen();
        this.throttledAdaptScreen = throttle(this.adaptScreen, 100);
        window.addEventListener('resize', this.throttledAdaptScreen);
    },
    destroyed() {
        this.$socket.unRegisterCallback('trendData')
        clearInterval(this.timerId);
        window.removeEventListener('resize', this.throttledAdaptScreen)
    },
    methods: {
        // 更改展示的图标主题
        changeSelect(title) {
            this.select = title;
            this.showChoice = false;
            this.updateChart();
        },
        // 初始化表格
        initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.trend_ref, this.theme)
            const initOption = {
                grid: {
                    left: '3%',
                    top: '35%',
                    right: '4%',
                    bottom: '1%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    left: 40,
                    top: '20%',
                    icon: 'circle'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false
                },
                yAxis: {
                    type: 'value'
                }
            }
            this.chartInstance.setOption(initOption)
        },
        // 获取数据
        async getData(data) {
            // const {data} = await this.$http.get('trend')
            this.allData = data;
            this.selectOptions = this.allData.type;
            this.select = this.selectOptions[0];
            // 渲染数据
            this.updateChart()
        },
        // 更新表格
        updateChart() {
            // 半透明的颜色值
            const colorArr1 = [
                'rgba(11, 168, 44, 0.5)',
                'rgba(44, 110, 255, 0.5)',
                'rgba(22, 242, 217, 0.5)',
                'rgba(254, 33, 30, 0.5)',
                'rgba(250, 105, 0, 0.5)'
            ]
            // 全透明的颜色值
            const colorArr2 = [
                'rgba(11, 168, 44, 0)',
                'rgba(44, 110, 255, 0)',
                'rgba(22, 242, 217, 0)',
                'rgba(254, 33, 30, 0)',
                'rgba(250, 105, 0, 0)'
            ]
            // 类目轴（x轴）的数据
            const timeArr = this.allData.common.month;
            // y轴数据(有多条折线图)
            const valueArr = this.allData[this.select.key].data;
            // lengend需要的数据
            const legendArr = valueArr.map(item => item.name);
            // 各个折线图的配置项
            const seriesArr = valueArr.map((item, index) => {
                return {
                    // 用于legend
                    name: item.name,
                    type: 'line',
                    data: item.data,
                    // 堆叠图
                    stack: 'map',
                    // 渐变颜色，从上到下
                    areaStyle: {
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: colorArr1[index]
                            },
                            {
                                offset: 1,
                                color: colorArr2[index]
                            }
                        ])
                    }
                }
            })
            const dataOption = {
                xAxis: {
                    data: timeArr
                },
                legend: {
                    data: legendArr
                },
                series: seriesArr
            }
            this.chartInstance.setOption(dataOption)
        },
        // 根据屏幕尺寸，将图标适配屏幕
        adaptScreen() {
            this.fontsize = this.$refs.trend_ref.offsetWidth / 100 * 3.6
            const adaptOption = {
                legend: {
                    itemWidth: this.fontsize,
                    itemHeight: this.fontsize,
                    itemGap: this.fontsize,
                    textStyle: {
                        fontSize: this.fontsize
                    }
                }
            }
            this.chartInstance.setOption(adaptOption)
            this.chartInstance.resize();
        }
    }
}
</script>

<style scoped lang='less'>
.trend {
    .select-box {
        position: absolute;
        left: 3%;
        top: 5%;
        z-index: 2;
        cursor: pointer;
        user-select: none;

        .title-icon {
            // 盒子默认为block,此时rotate不生效
            display: inline-block;
            transition: all .5s;
            transform: rotate(0deg);

            &.fold {
                transform: rotate(-180deg);
            }
        }

        .select-options {
            background-color: hsla(192, 68%, 30%, 0.039);
            transition: all .5s;
            overflow: hidden;
            height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            &.fold {
                height: 0;
            }

            .option {
                text-align: center;
            }
        }
    }
}
</style>